import { useState, useEffect } from 'react';
import { X, Cookie } from 'lucide-react';
import { useLanguage } from '../contexts/LanguageContext';
import { Link } from 'react-router-dom';
import { useLocalizedLink } from '../hooks/useLocalizedLink';

const CookieBanner = () => {
  const [isVisible, setIsVisible] = useState(false);
  const { language } = useLanguage();
  const { getLink } = useLocalizedLink();
  
  const isZhCN = language === 'zh-CN';

  useEffect(() => {
    // Check if user has already accepted cookies
    const cookieConsent = localStorage.getItem('cookieConsent');
    if (!cookieConsent) {
      // Show banner after a short delay
      const timer = setTimeout(() => {
        setIsVisible(true);
      }, 1000);
      return () => clearTimeout(timer);
    }
  }, []);

  const acceptCookies = () => {
    localStorage.setItem('cookieConsent', 'accepted');
    setIsVisible(false);
  };

  const rejectCookies = () => {
    localStorage.setItem('cookieConsent', 'rejected');
    setIsVisible(false);
  };

  if (!isVisible) return null;

  return (
    <div className="fixed bottom-0 left-0 right-0 z-50 p-4 animate-slide-up">
      <div className="container mx-auto max-w-6xl">
        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-2xl border border-gray-200 dark:border-gray-700 p-6">
          <div className="flex items-start gap-4">
            <div className="flex-shrink-0">
              <Cookie className="w-8 h-8 text-blue-600 dark:text-blue-400" />
            </div>
            
            <div className="flex-1">
              <h3 className="text-lg font-semibold mb-2 text-gray-900 dark:text-white">
                {isZhCN ? '我们使用 Cookie' : 'We Use Cookies'}
              </h3>
              <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
                {isZhCN 
                  ? '我们使用 Cookie 和类似技术来提供更好的用户体验，分析网站流量，并个性化内容。继续浏览即表示您同意我们使用 Cookie。'
                  : 'We use cookies and similar technologies to provide a better user experience, analyze site traffic, and personalize content. By continuing to browse, you agree to our use of cookies.'}
              </p>
              <div className="flex flex-wrap gap-3">
                <button
                  onClick={acceptCookies}
                  className="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium transition-colors"
                >
                  {isZhCN ? '接受所有 Cookie' : 'Accept All Cookies'}
                </button>
                <button
                  onClick={rejectCookies}
                  className="px-6 py-2 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-900 dark:text-white rounded-lg font-medium transition-colors"
                >
                  {isZhCN ? '仅必要 Cookie' : 'Essential Only'}
                </button>
                <Link
                  to={getLink('/privacy-policy')}
                  className="px-6 py-2 text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 font-medium transition-colors flex items-center"
                >
                  {isZhCN ? '了解更多' : 'Learn More'}
                </Link>
              </div>
            </div>

            <button
              onClick={rejectCookies}
              className="flex-shrink-0 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
              aria-label="Close"
            >
              <X className="w-5 h-5" />
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default CookieBanner;
